<template>
  <div class="login">
    <div class="login-body">
      <vxe-form :data="formData1" @submit="loginEvent" :rules="formRules1" @reset="resetEvent" title-width="60"
        title-align="right">
        <vxe-form-item title="账号" field="username" :item-render="{}" span="24">
          <template #default="{ data }">
            <vxe-input v-model="data.username" placeholder="请输入用户名" clearable></vxe-input>
          </template>
        </vxe-form-item>

        <vxe-form-item title="密码" field="password" :item-render="{}" span="24">
          <template #default="{ data }">
            <vxe-input v-model="data.password" type="password" placeholder="请输入密码" clearable></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item align="center" span="24" :item-render="{}">
          <template #default>
            <vxe-button type="submit" status="primary">登录</vxe-button>
            <vxe-button type="reset">重置</vxe-button>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
</div>
</template>

<script >
  export default {
    name: 'componentName',
    components: {},
    data() {
      return {
        formData1: {
          username: '',
          // username: '2008231',
          // password: '123456'
          password: ''
        },
        formRules1: {
          username: [
            { required: true, message: '请输入用户名' }
          ],
          password: [
            { required: true, message: '请输入用户密码' }
          ],
        },
      }
    },
    async activated() {

    },
    async mounted() {
      // if (window.sessionStorage.getItem('logout') == '1') {
      //   console.log('刷新了');
      //   window.sessionStorage.clear()
      //   window.location.reload()
      // }
    },
    methods: {
      async loginEvent() {
        console.log('点击登录');
        try {
          let arr_data = await this.BaseUserLoginListPost(this.formData1)
        // console.log(888)
        if (arr_data.status == 202) return this.$message.error(arr_data.data.msg)
        if (arr_data.status !== 201) return this.$message.error('账号或密码错误')
          console.log(9999);
          console.log(arr_data.data);
        // 1、登录成功保存token
        window.sessionStorage.setItem('token', arr_data.data.token)

        // 2、保存用户id
        window.sessionStorage.setItem('user_id', arr_data.data.userId)
        window.sessionStorage.setItem('user_name', arr_data.data.username)

        window.sessionStorage.setItem('activeIndex','/index')

        this.$message.success('登录成功')
        this.$router.push('/index')
        } catch (error) {
          console.log(error,11)
          this.$message.error('登录接口请求失败')
        }
      

      },

      async resetEvent() {
        this.formData1.jitai = window.sessionStorage.getItem('jitai')
        console.log('点击重置');
      },
    }
  }
</script>

<style lang='less' scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.login-body {
  width: 20rem;
  padding: 2rem;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(117, 66, 66, 0.1);
}
</style>